<!DOCTYPE html>
<html>
<head>
<link href="window.css" rel="stylesheet">
<link rel="icon" id="iconLink">
</head>
<body>
  <h1>Window State Sample</h1>
  <div id="fullscreen-area">

    <p><b>HTML5 Fullscreen</b>:
      <button id="html-fullscreen-enter">Enter</button>
      <button id="html-fullscreen-exit">Exit</button>
      <span id="html-fullscreen-label"></span>
    </p>

    <p>chrome.app.<b>window actions</b>, delayed:
      <input id="delay-slider" type ="range" min ="0" max="20000" step="1000" value="0"/>
      <span id="delay-label"></span>
      <br>
      <button id="fullscreen">Fullscreen</button>
      <button id="maximize">Maximize</button>
      <button id="minimize">Minimize</button>
      <button id="restore">Restore</button>
      <button id="hide">Hide</button>
      <button id="show">Show</button>
      <button id="showInactive">Show Inactive</button>
      <label id="alwaysOnTopLabel"><input type="checkbox" id="alwaysOnTop" />Always On Top</label>
      <br>
      <button id="move">Move To (L,T)</button> /
      <button id="resize">Resize To (W,H)</button> /
      <button id="setbounds">Set Bounds (L,T,W,H)</button>:
      <br>
      Left, Top: <input type="number" class="size" id="moveWindowLeft" step=1 />
      <input type="number" class="size" id="moveWindowTop" step=1 />
      Width, Height: <input type="number" class="size" id="resizeWindowWidth" step=1 />
      <input type="number" class="size" id="resizeWindowHeight" step=1 />
    </p>

    <p><b>Create</b> a new window:<br>
      <label><input type="radio" name="newWindowId" value="ID1" checked/>id = ID1</label>
      <label><input type="radio" name="newWindowId" value="ID2" />id = ID2</label>
      <label><input type="radio" name="newWindowId" value="none" />Without id</label>
      : The id will restore previous position.
      <br>
      <label>Min<input type="number" class="size" id="newWindowWidthMin" step=1 /></label>
      <label><input type="number" class="size" id="newWindowWidthMax" step=1 />Max Width</label>
      <br>
      <label>Min<input type="number" class="size" id="newWindowHeightMin" step=1 /></label>
      <label><input type="number" class="size" id="newWindowHeightMax" step=1 />Max Height</label>
      <label><input type="checkbox" id="newWindowResizable" checked/>Resizable</label>
      <label id="newWindowOnTopLabel"><input type="checkbox" id="newWindowOnTop" />Always On Top</label>
      <label><input type="checkbox" checked id="newWindowFocused">Focused</label>
      <br>
      <label><input type="radio" name="newWindowHidden" value="visible" checked/>Visible</label>
      <label><input type="radio" name="newWindowHidden" value="hidden" />Hidden, then shown</label>
      <br>
      <button id="newWindowNormal">Normal</button>
      <button id="newWindowFullscreen">Fullscreen</button>
      <button id="newWindowMaximized">Maximized</button>
      <button id="newWindowMinimized">Minimized</button>
    </p>

    <p>Current window state:
      <input type="checkbox" id="isFullscreen" disabled>isFullscreen
      <input type="checkbox" id="isMaximized"  disabled>isMaximized
      <input type="checkbox" id="isMinimized"  disabled>isMinimized
      <input type="checkbox" id="isHidden" disabled>document.webkitHidden
    </p>

    <p>Last 10 seconds state:
      <input type="checkbox" id="wasFullscreen" disabled>wasFullscreen
      <input type="checkbox" id="wasMaximized"  disabled>wasMaximized
      <input type="checkbox" id="wasMinimized"  disabled>wasMinimized
      <input type="checkbox" id="wasHidden" disabled>document.webkitHidden
    </p>

    <p>Window icon:
      <button id="normalWindowIcon"/>Normal</button>
      <button id="customWindowIcon"/>Custom</button>
    </p>
  </div>
  This text is outside of the HTML5 fullscreen area.
</body>
<script src="window.js"></script>
</html>
